<template>
  <div>
    <div>
      <el-radio-group v-model="data.type">
        <el-radio :label="'device'">设备监听</el-radio>
      </el-radio-group>
    </div>
    <div v-if="data.type == 'device'">
      <el-row>
        <el-col :span="8"
          ><el-button plain @click="openProductSelector" size="mini"
            >选择产品:{{ selectedProduct.name }}</el-button
          ></el-col
        >
        <el-col :span="8"
          ><el-button
            v-if="selectedProduct.id"
            plain
            @click="openDeviceSelector"
            size="mini"
            >选择设备:{{ selectedDeviceName }}</el-button
          ></el-col
        >
        <el-col :span="8"> </el-col>
      </el-row>
      <ProductSelector
        v-if="showProductSelector"
        @productSelected="onProductSelected"
      ></ProductSelector>
      <DeviceSelector
        v-if="showDeviceSelector && selectedProduct.id"
        @deviceSelected="onDeviceSelected"
        :param="deviceParam"
      ></DeviceSelector>
      <el-row>
        <el-col :span="2"> 条件: </el-col>
        <el-col :span="22">
          <el-row v-for="cond in data.conditions" :key="cond.identifier">
            <el-col :span="22">
              <ListenerCondition
                :data="cond"
                :types="modelItems"
                :properties="properties"
                :events="events"
                :services="services"
              ></ListenerCondition>
            </el-col>
            <el-col :span="2" style="padding-left: 5px">
              <el-button plain @click="delCondition(cond)" size="mini"
                >-</el-button
              >
            </el-col>
          </el-row>
          <el-button
            v-if="selectedProduct.id"
            plain
            @click="addCondition"
            size="mini"
            >+</el-button
          >
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import DeviceSelector from './common/DeviceSelector.vue'
import ProductSelector from './common/ProductSelector.vue'
import ListenerCondition from './ListenerCondition.vue'
// import { GetThingModel, GetProduct } from '../../api/productApi'
// import { GetDeviceByDn } from '@/api/deviceApi'
export default {
  name: 'Listener',
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          type: '',
          conditions: []
        }
      }
    }
  },
  data () {
    return {
      showProductSelector: false,
      selectedProduct: {},
      selectedDevice: {},
      showDeviceSelector: false,
      selectedDeviceName: '所有设备',
      showConditionSelector: false,
      properties: [],
      events: [],
      services: [],
      modelItems: [],
      deviceParam: {}
    }
  },
  // 注册组件
  components: {
    ProductSelector,
    DeviceSelector,
    ListenerCondition
  },
  created () {
    this.init()
  },
  watch: {
    data () {
      this.init()
    }
  },
  methods: {
    init () {
      if (this.data.type === 'device') {
        const conds = this.data.conditions
        if (conds.length > 0) {
          const pkDn = conds[0].device.split('/')
          const pk = pkDn[0]
          this.getProduct(pk)
          const dn = pkDn[1]
          if (dn !== '#' && dn !== 'undefined') {
            // GetDeviceByDn(pk, dn).then((res) => {
            //   this.selectedDeviceName = res.deviceName
            // })
          }
        }
      }
    },
    openProductSelector () {
      this.showProductSelector = !this.showProductSelector
    },
    openDeviceSelector () {
      this.showDeviceSelector = !this.showDeviceSelector
    },
    onProductSelected (product) {
      this.selectedProduct = product
      this.showProductSelector = false
      this.deviceParam.pk = product.id
      this.data.conditions.forEach((c) => {
        c.parameters = []
      })
      this.getThingModel(product.id)
      this.selectedDeviceName = '所有设备'
    },
    onDeviceSelected (device) {
      this.selectedDeviceName = device.deviceName
      this.selectedDevice = device
      this.showDeviceSelector = false
    },
    getThingModel (pk) {
      // GetThingModel(pk).then((res) => {
      //   this.initThingModel(res)
      // })
    },
    getProduct (pk) {
      // GetProduct(pk).then((res) => {
      //   this.selectedProduct = res
      //   this.getThingModel(pk)
      // })
    },
    initThingModel (res) {
      this.modelItems = []
      this.properties = []
      this.events = []
      this.services = []

      this.modelItems.push({
        name: '通配',
        items: [
          {
            type: 'state',
            identifier: 'state:*',
            name: '设备上下线'
          },
          {
            type: 'event',
            identifier: 'event:*',
            name: '任意事件上报'
          },
          {
            type: 'service_reply',
            identifier: 'service_reply:*',
            name: '任意服务回复'
          }
        ]
      })

      const items = []
      this.modelItems.push({
        name: '精确匹配',
        items: items
      })
      items.push({
        type: 'property',
        identifier: 'report',
        name: '属性上报'
      })
      res.model.events.forEach((s) => {
        items.push({
          type: 'event',
          identifier: s.identifier,
          name: s.name
        })
      })
      res.model.services.forEach((s) => {
        items.push({
          type: 'service',
          identifier: s.identifier,
          name: s.name
        })
      })

      this.properties.push({
        identifier: '*',
        name: '任意'
      })
      res.model.properties.forEach((p) => {
        this.properties.push({
          identifier: p.identifier,
          name: p.name
        })
      })

      res.model.events.forEach((s) => {
        const items = []
        this.events.push({
          identifier: s.identifier,
          items: items
        })

        s.outputData.forEach((p) => {
          items.push({
            identifier: p.identifier,
            name: p.name
          })
        })
      })

      res.model.services.forEach((s) => {
        const items = []
        this.services.push({
          identifier: s.identifier,
          items: items
        })

        s.outputData.forEach((p) => {
          items.push({
            identifier: p.identifier,
            name: p.name
          })
        })
      })
    },
    addCondition () {
      this.showConditionSelector = true
      this.data.conditions.push({
        id: Math.random(),
        type: '',
        device:
          this.selectedProduct.id +
          '/' +
          (this.selectedDevice.deviceName || '#'),
        identifier: '',
        parameters: []
      })
    },
    delCondition (cond) {
      const index = this.data.conditions.findIndex((c) => {
        return c.id === cond.id
      })
      this.data.conditions.splice(index, 1)
    }
  }
}
</script>

<style>
</style>
